<template>
	<view class="work-container">
		<!-- 轮播图 -->
		<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
			<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
				<swiper-item v-for="(item, index) in data" :key="index">
					<view class="swiper-item" @click="clickBannerItem(item)"><image :src="item.image" mode="aspectFill" :draggable="false" /></view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>

		<!-- 宫格组件   :hasPermi="['system:user:edit']"-->
		<uni-section title="工单管理" type="line"></uni-section>
		<view class="grid-body">
			<uni-grid :column="4" :showBorder="false">
				<uni-grid-item v-if="checkPermi(['app:work:add'])">
					<view class="grid-item-box" @click="handleToAdd">
						<uni-icons type="personadd" size="30"></uni-icons>
						<text class="text">提报工单</text>
					</view>
				</uni-grid-item>
				<uni-badge :text="0" absolute="rightTop" :offset="[19, 19]" size="large" v-if="checkPermi(['app:work:myorder'])">
					<uni-grid-item>
						<view class="grid-item-box" @click="handleToAll">
							<uni-icons type="staff" size="30"></uni-icons>
							<text class="text">我的工单</text>
						</view>
					</uni-grid-item>
				</uni-badge>
				<uni-badge :text="orderNum.grabCount" absolute="rightTop" :offset="[19, 19]" size="large" v-if="checkPermi(['app:work:waitconfirm'])">
					<uni-grid-item>
						<view class="grid-item-box" @click="handleToWait">
							<uni-icons type="notification" size="30"></uni-icons>
							<text class="text">待抢单</text>
						</view>
					</uni-grid-item>
				</uni-badge>
				<uni-badge :text="orderNum.ongoingCount" absolute="rightTop" :offset="[19, 19]" size="large" v-if="checkPermi(['app:work:going'])">
					<uni-grid-item>
						<view class="grid-item-box" @click="handleToIng">
							<uni-icons type="reload" size="30"></uni-icons>
							<text class="text">进行中</text>
						</view>
					</uni-grid-item>
				</uni-badge>
				<uni-badge :text="orderNum.finishedCount" absolute="rightTop" :offset="[19, 19]" size="large" v-if="checkPermi(['app:work:completed'])">
					<uni-grid-item>
						<view class="grid-item-box" @click="handleToSuccess">
							<uni-icons type="auth" size="30"></uni-icons>
							<text class="text">已完成</text>
						</view>
					</uni-grid-item>
				</uni-badge>
			</uni-grid>
			<view class="action-btn"><button  type="primary" open-type="contact" @contact="openService" class="login-btn cu-btn block bg-blue lg round">联系客服</button></view>
		</view>
	</view>
</template>

<script>
import { getOrderNum } from '@/api/business/order';

export default {
	data() {
		return {
			current: 0,
			swiperDotIndex: 0,
			data: [
				{
					image: '/static/images/banner/banner.png'
				}
			],
			value: 0,
			customStyle: {
				backgroundColor: '#62ed0d',
				color: '#fff'
			},
			orderNum:{
				totalCount: 0,
				grabCount: 0,
				ongoingCount: 0,
				finishedCount: 0
			}
		};
	},
	created() {
		// this.getOrderNum();
	},
	onShow() {
		this.getOrderNum();
	},
	methods: {
		getOrderNum(){
			getOrderNum().then(response => {
				// console.log('response', response)
				if(response.code === 200){
					this.orderNum.totalCount = response.data.totalCount
					this.orderNum.grabCount = response.data.grabCount
					this.orderNum.ongoingCount = response.data.ongoingCount
					this.orderNum.finishedCount = response.data.finishedCount
				}
			});
		},
		clickBannerItem(item) {
			console.info(item);
		},
		changeSwiper(e) {
			this.current = e.detail.current;
		},
		handleToAdd() {
			this.$tab.navigateTo('/pages/work/add/index');
		},
		handleToAll() {
			this.$tab.navigateTo('/pages/work/order/index?tab=1');
		},
		handleToWait() {
			this.$tab.navigateTo('/pages/work/order/index?tab=2');
		},
		handleToIng() {
			this.$tab.navigateTo('/pages/work/order/index?tab=3');
		},
		handleToSuccess() {
			this.$tab.navigateTo('/pages/work/order/index?tab=4');
		},
		mounted() {
			const timer = setInterval(() => {
				if (this.value >= 199) {
					clearInterval(timer);
					return;
				}
				this.value++;
			}, 100);
		}
	}
};
</script>

<style lang="scss">
/* #ifndef APP-NVUE */
page {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	background-color: #fff;
	min-height: 100%;
	height: auto;
}

view {
	font-size: 14px;
	line-height: inherit;
}

/* #endif */

.text {
	text-align: center;
	font-size: 26rpx;
	margin-top: 10rpx;
}

.grid-item-box {
	flex: 1;
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 15px 0;
}

.uni-margin-wrap {
	width: 690rpx;
	width: 100%;
}

.swiper {
	height: 300rpx;
}

.swiper-box {
	height: 150px;
}

.swiper-item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #fff;
	height: 300rpx;
	line-height: 300rpx;
}

@media screen and (min-width: 500px) {
	.uni-swiper-dot-box {
		width: 400px;
		/* #ifndef APP-NVUE */
		margin: 0 auto;
		/* #endif */
		margin-top: 8px;
	}

	.image {
		width: 100%;
	}
}

.login-btn {
	margin-top: 40px;
	height: 45px;
	width: 80%;
	color: #fff;
	background-color: #007aff;
	margin: 0 auto;
	margin-top: 50px;
}
</style>
